<template>
  <div class="plateMovement">
    <el-row>
      <el-col :span="6" :offset="0" v-for="(item,index) in plateMovements" :key="index">
         <router-link :to="item.path">
           <div class="p_item">
           <span :class="item.icon"></span>
           <span>{{item.name}}</span>
         </div>
         </router-link>
      </el-col>
    </el-row>
    
  </div>
</template>

<script lang="ts">
import { defineComponent, onMounted, ref } from 'vue'
import { findBanner } from '../api/api'
import t from "@/assets/img/t.jpeg"
export default defineComponent({
  name: 'plateMovement',
  setup() {
     const plateMovements = ref([
       {
       name:"最新文章",
       des:"记录自己的学习心得",
       icon:"el-icon-document",
       path:"/newArticle"
       },
       {
       name:"编程分享",
       des:"分享别人的编程经验",
       icon:"el-icon-document-copy",
       path:"/codeShare"
       },
       {
       name:"程序人生",
       des:"记录自己的程序人生",
       icon:"el-icon-school",
       path:"/codeLife"
       },
       {
       name:"生活日记",
       des:"记录自己的生活日记",
       icon:"el-icon-camera",
       path:"/lifeWrite"
       },
       {
       name:"工具推荐",
       des:"有用的工具集合",
       icon:"el-icon-s-tools",
       path:"/manger"
       }
     ])
     return {
      plateMovements
     }
  },
})
</script>
<style lang="scss" scoped>
   .plateMovement{
     padding:0.2rem;
     margin-top: 0.1rem;
     background-color: white;
     text-align: center;
     .el-row{
       display: block;
       overflow: auto;
       white-space: nowrap;
       .el-col-6{
         display: inline-block;
         float: none;
       }
     }
      a{
        text-decoration: none;
        color: rgb(163, 155, 155);
      }
     .p_item{
       width: 1.5rem;
       height: 1.5rem;
       padding: 0.1rem;
       box-sizing: border-box;
       border-radius: 12px;
       border: 1px solid rgb(216, 216, 223);
       box-shadow: 5px 5px 3px rgb(163, 155, 155);
       display: flex;
       flex-direction: column;
       color: rgb(163, 155, 155);
       margin: 0.1rem 0.2rem;
     
       span{
         text-align: center;
       }
       span:nth-child(1){
        flex: 1;
        text-align: center;
        font-size: 0.6rem;
        color: #409EFF;
        line-height: 0.7rem;
        vertical-align: middle;
        margin-top: 0.1rem;
        height: 100%;
       }
     }
     .p_item:nth-child(1){
       margin-left:  0;
     }
   }
</style>
